<template>
  <div id="app" ref="app">
    <div class="common-layout">
      <el-container>
        <el-aside>
          <Sider></Sider>
        </el-aside>
        <el-container>
          <el-header>
            <Header></Header>
          </el-header>
          <el-main>
            <Main></Main>
          </el-main>
          <el-footer>
            <Footer></Footer>
            <Comment></Comment>
          </el-footer>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "@/stores/storage";

export default defineComponent({
  mounted() {
    this.changBGC();
  },
  setup() {
    let app = ref(null);
    const store = storage();
    const { color } = storeToRefs(store);
    function changBGC() {
      app.value.style.backgroundColor = color.value;
    }
    watch(
      () => color.value,
      (v1) => {
        if (v1) {
          if (v1 !== "rgb(192, 192, 192)") changBGC();
        }
      },
      { deep: true, immediate: true }
    );
    return {
      color,
      app,
      changBGC,
    };
  },
});
</script>

<style scoped>
.common-layout {
  position: absolute;
  left: 200px;
  top: 30px;
}
.el-aside {
  width: 150px;
  height: 650px;
}
.el-header {
  height: 50px;
  width: 1000px;
}
.el-main {
  height: 540px;
  padding: 0;
  background-color: white;
  width: 1000px;
  overflow: scroll;
  scrollbar-width: none;
  border-radius: 15px;
}
.el-footer {
  height: 60px;
  width: 1000px;
  position: relative;
}
</style>
